<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - Video Danmaku</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
    </script>
    <style>
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
        }
        .login-container {
            background: white;
            border-radius: 10px;
            padding: 2rem;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 400px;
            margin: 2rem auto;
        }
        .form-control:focus {
            border-color: #6a11cb;
            box-shadow: 0 0 0 0.2rem rgba(106, 17, 203, 0.25);
        }
        .btn-primary {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            border: none;
        }
        .btn-primary:hover {
            background: linear-gradient(135deg, #5a0fb1 0%, #1e63d6 100%);
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="login-container">
                <h2 class="text-center mb-4">
                    <i class="fas fa-sign-in-alt"></i> 登录
                </h2>
                <form @submit="handleLogin">
                    <div class="mb-3">
                        <label for="username" class="form-label">用户名</label>
                        <input type="text" 
                               class="form-control" 
                               id="username" 
                               v-model="formData.username" 
                               required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <input type="password" 
                               class="form-control" 
                               id="password" 
                               v-model="formData.password" 
                               required>
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" 
                                class="btn btn-primary" 
                                :disabled="loading">
                            <i v-if="loading" class="fas fa-spinner fa-spin"></i>
                            <i v-else class="fas fa-sign-in-alt"></i>
                            {{ loading ? '登录中...' : '登录' }}
                        </button>
                        <a href="/" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left"></i> 返回主页
                        </a>
                    </div>
                    <div class="text-center mt-3">
                        <p>没有账户？<a href="/register.html">立即注册</a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script type="module">
        import { createApp, ref, onMounted } from 'vue';
        import { checkAuthStatus, login, showToast } from '/js/auth.js';

        createApp({
            setup() {
                const formData = ref({
                    username: '',
                    password: ''
                });
                const loading = ref(false);

                const handleLogin = async (event) => {
                    event.preventDefault();
                    
                    if (!formData.value.username || !formData.value.password) {
                        showToast('请填写用户名和密码', 'error');
                        return;
                    }

                    loading.value = true;
                    
                    try {
                        await login(formData.value.username, formData.value.password);
                        // login function will handle the redirect
                    } catch (error) {
                        console.error('Login failed:', error);
                        const errorMessage = error.response?.data?.error || '登录失败，请重试';
                        showToast(errorMessage, 'error');
                    } finally {
                        loading.value = false;
                    }
                };

                // Check if user is already logged in
                onMounted(async () => {
                    const isAuth = await checkAuthStatus();
                    if (isAuth) {
                        // If already logged in, redirect to the requested page or home
                        const urlParams = new URLSearchParams(window.location.search);
                        const redirectUrl = urlParams.get('redirect') || '/';
                        window.location.href = redirectUrl;
                    }
                });

                return {
                    formData,
                    loading,
                    handleLogin
                };
            }
        }).mount('#app');
    </script>
</body>
</html>
